<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.org/ui"
	xmlns:pe="http://primefaces.org/ui/extensions"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:fn="http://java.sun.com/jsp/jstl/functions">

	<p:layout style="width: 100%; height: 650px;">
		<p:layoutUnit position="north" size="400" resizable="true">
			
			I'm from Income
			<!-- <h:form id="form_main_top">

				<p:contextMenu for="income_table">
					<p:menuitem value="Edit" type="button" icon="ui-icon-search"
						update=":form_update" process="@this"
						actionListener="#{incomeBean.prepareItem(1)}"
						oncomplete="changeDialogHeader('#{incomeBean.dialog_Update_Header}'); newIncomeDialogVar.show();" />

					<p:menuitem value="Delete" type="button" icon="ui-icon-close"
						process="@parent" oncomplete="confirmDialogVar.show()" />
				</p:contextMenu>

				<p:dataTable id="income_table" var="income"
					value="#{incomeBean.lazyModel}" lazy="true" paginator="true"
					paginatorAlwaysVisible="false" rows="5"
					paginatorTemplate="{FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink}"
					paginatorPosition="bottom" selectionMode="multiple"
					selection="#{incomeBean.selectedRows}" rowKey="#{income.id.id}"
					rowStyleClass="#{income.status eq true ? 'disabled' : null}"
					emptyMessage="#{msg['wallet.app.income.incomeTable.noIncomeFound']}">

					<f:facet name="header">Buget list</f:facet>

					<p:ajax event="rowSelect" update=":form_action" />
					<p:ajax event="rowUnselect" update=":form_action" />

					<p:column headerText="ID" sortBy="#{income.id.id}">
						<h:outputText value="#{income.id.id}" />
					</p:column>

					<p:column headerText="Name" filterBy="#{income.name}"
						sortBy="#{income.name}">
						<h:outputText value="#{income.name}" />
					</p:column>

					<p:column headerText="Description" filterBy="#{income.description}">
						<h:outputText value="#{income.description}" />
					</p:column>

					<p:column headerText="Projected" filterBy="#{income.projected}"
						sortBy="#{income.projected}">
						<h:outputText value="#{income.projected}" />
					</p:column>

					<p:column headerText="Actual" filterBy="#{income.actual}"
						sortBy="#{income.actual}">
						<h:outputText value="#{income.actual}" />
					</p:column>

					<p:column headerText="Status" filterBy="#{income.status}"
						filterOptions="">
						<p:selectBooleanCheckbox disabled="true"
							value="#{income.status eq true}" />
					</p:column>
				</p:dataTable>
			</h:form> -->

			<h:form id="form_action">
				<h:panelGrid id="income_action" columns="3">
					<p:commandButton actionListener="#{incomeBean.prepareItem(0)}"
						value="#{msg['wallet.app.button.addNew']}" process="@none"
						update=":form_update"
						oncomplete="changeDialogHeader('#{incomeBean.dialog_Add_New_Header}'); newIncomeDialogVar.show();" />

					<!-- 
					<p:commandButton actionListener="#{incomeBean.prepareItem(1)}"
						value="#{msg['wallet.app.button.update']}" process="@this"
						update=":form_update"
						disabled="#{fn:length(incomeBean.selectedRows) lt 1}"
						oncomplete="changeDialogHeader('#{incomeBean.dialog_Add_New_Header}'); newIncomeDialogVar.show();" />

					<p:commandButton value="#{msg['wallet.app.button.delete']}"
						process="@none" oncomplete="confirmDialogVar.show()" />
					-->
				</h:panelGrid>
				<script>
					function changeDialogHeader(title){
						newIncomeDialogVar.titlebar.children('span.ui-dialog-title').html(title);
					}
				</script>
			</h:form>


			<p:dialog id="newIncomeDialog" widgetVar="newIncomeDialogVar"
				draggable="false" resizable="false" closable="false"
				header="dialog header" modal="true" appendToBody="true">

				<h:form id="form_update">
					<p:messages id="add_income_messages" />
					<p:panelGrid id="form_update_income_panel">
						<p:row>
							<p:column>
								<h:outputLabel for="name"
									value="#{msg['wallet.app.income.dialog.form.name']}" />
							</p:column>
							<p:column>
								<p:inputText id="name" value="#{incomeBean.customIncome.name}"
									required="true" requiredMessage="Income name is required" />
								<p:message id="name_msg" for="name" display="icon" />
							</p:column>
						</p:row>
						<p:row>
							<p:column>
								<h:outputLabel for="desc"
									value="#{msg['wallet.app.income.dialog.form.desc']}" />
							</p:column>
							<p:column>
								<p:inputText id="desc"
									value="#{incomeBean.customIncome.description}" />
							</p:column>
						</p:row>
						<p:row>
							<p:column>
								<h:outputLabel for="category"
									value="#{msg['wallet.app.income.dialog.form.cat']}" />
							</p:column>
							<p:column>
								<p:inputText id="category"
									value="#{incomeBean.customIncome.incomeCategory}" />
							</p:column>
						</p:row>


						<p:row>
							<p:column>
								<h:outputLabel for="earnDate"
									value="#{msg['wallet.app.income.dialog.form.earnDate']}" />
							</p:column>
							<p:column>
								<p:calendar id="earnDate"
									value="#{incomeBean.customIncome.earnDate}"
									pattern="dd/MM/yyyy" require="true"
									requiredMessage="Earn date must be chosen">
									<f:convertDateTime pattern="dd/MM/yyyy" />
								</p:calendar>
								<p:message id="s_earnDate" for="earnDate" display="icon" />
							</p:column>
						</p:row>

						<p:row>
							<p:column>
								<h:outputLabel for="amountUser"
									value="#{msg['wallet.app.income.dialog.form.amountUser']}" />
							</p:column>
							<p:column>
								<p:inputText id="amountUser"
									value="#{incomeBean.customIncome.amountUser}" required="true" />
							</p:column>
						</p:row>

						<p:row>
							<p:column>
								<h:outputLabel for="currency"
									value="#{msg['wallet.app.income.dialog.form.currency']}" />
							</p:column>
							<p:column>
								<p:inputText id="currency"
									value="#{incomeBean.customIncome.currency}" required="true" />
							</p:column>
						</p:row>

						<p:row>
							<p:column>
								<h:outputLabel for="amountConverted"
									value="#{msg['wallet.app.income.dialog.form.amountConverted']}" />
							</p:column>
							<p:column>
								<p:inputText id="amountConverted"
									value="#{incomeBean.customIncome.amountConverted}"
									required="true" />
							</p:column>
						</p:row>

						<p:row>
							<p:column>
								<h:outputLabel for="reason"
									value="#{msg['wallet.app.income.dialog.form.reason']}" />
							</p:column>
							<p:column>
								<p:inputText id="reason"
									value="#{incomeBean.customIncome.reason}" required="true" />
							</p:column>
						</p:row>



						<p:row>
							<p:column>
								<h:outputLabel for="status"
									value="#{msg['wallet.app.income.dialog.form.status']}" />
							</p:column>
							<p:column>
								<p:selectBooleanButton id="status"
									value="#{incomeBean.customIncome.status}"
									onLabel="#{msg['wallet.app.option.ACTIVE']}"
									offLabel="#{msg['wallet.app.option.DISABLED']}"
									onIcon="ui-icon-check" offIcon="ui-icon-close" />
							</p:column>
						</p:row>
						<p:row>
							<p:column>
								<p:commandButton action="#{incomeBean.storeItem()}"
									process=":form_update"
									update=":log_message add_income_messages"
									value="#{msg['wallet.app.button.save']}" icon="ui-icon-check"
									style="margin:0"
									oncomplete="handleUpdateIncome(xhr, status, args)" />
							</p:column>
							<p:column>
								<p:commandButton value="#{msg['wallet.app.button.cancel']}"
									onclick="newIncomeDialogVar.hide();" icon="ui-icon-cancel"
									style="margin:0" />
							</p:column>
						</p:row>
					</p:panelGrid>
				</h:form>
				<script>
					function handleUpdateIncome(xhr, status, args){
						if(!args.validationFailed){
							newIncomeDialogVar.hide();
						}
					}
				</script>
			</p:dialog>


			<p:confirmDialog id="confirmDialog" widgetVar="confirmDialogVar"
				severity="alert"
				message="#{msg['wallet.app.income.dialog.confirmDeleteMessage']}"
				header="#{msg['wallet.app.income.dialog.confirmDeleteHeader']}"
				closable="false" appendToBody="true">
				<h:form>
					<p:commandButton id="confirm"
						actionListener="#{incomeBean.deleteItem()}" value="Yes"
						process="@this" update="" oncomplete="confirmDialogVar.hide()" />

					<p:commandButton id="decline" value="Not Yet"
						onclick="confirmDialogVar.hide()" type="button" />
				</h:form>
			</p:confirmDialog>
		</p:layoutUnit>


		<p:layoutUnit position="center">
			<h:form id="form_main_center">
   				form main center
   			</h:form>
		</p:layoutUnit>
	</p:layout>

</ui:composition>